<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        height: 400px;
        width: 500px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,50%);
        background-color: pink;
    }

    .nav{
        width: 100%;
        height: 50px;
        background-color: rgb(181, 78, 78);
        display: flex;
        cursor: pointer;
    }
     li{
        list-style: none;
        display: inline-block;
        flex-grow:1 ;
        text-align: center;
        line-height:50px;
        color: #fff;
    }
    .nav li:hover{
        background-color: rgb(14, 14, 14);
    }
    .current li{
        display: block;
        height: 50px;
    }
</style>
<script>
    //原生JS写法
/*     window.addEventListener('load',function(){
      var navUl = document.querySelector('.nav');
      var navli = document.querySelector('.nav').querySelectorAll('li');
      var currentUl = document.querySelector('.current'); 
      var currentli = document.querySelector('.current').querySelectorAll('li'); 
     for(i=0;i<navli.length;i++){
        navli[i].setAttribute('index', i); 
      navli[i].addEventListener('click',function(){
        for(i=0;i<navli.length;i++){
        navli[i].style.backgroundColor = 'rgb(181, 78, 78)';
        currentli[i].style.display = 'none';
        }
        this.style.backgroundColor = 'red';
        var index = this.getAttribute('index');
        currentli[index].style.display = 'block';
      })
    }
    }); */

    //jQuery写法
    $(function(){
        $('.nav li').click(function(){
       $(this).css({"backgroundColor":'red'}).siblings().css("backgroundColor",'rgb(181, 78, 78)');
       var index = $(this).index();
       $(".current li").eq(index).css('display','block').siblings().css('display','none');
        })
    })
</script>
<body>
    <div class="box">
        <ul class="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul  class="current">
            <li>5</li>
            <li>4</li>
            <li>3</li>
            <li>2</li>
            <li>1</li>
        </ul>
    </div>
</body>
</html>